<template>
  <view class="action-bar">
    <!-- 点赞按钮 -->
    <view class="action-item" @click="toggleLike">
      <image :src="likeIcon" class="action-icon" />
      <text :class="{'like-text': isLiked}">{{ likeCount }}</text>
    </view>

    <!-- 踩按钮 -->
    <view class="action-item" @click="toggleDislike">
      <image :src="dislikeIcon" class="action-icon rotated" />
      <text :class="{'dislike-text': isDisliked}">踩</text>
    </view>

    <!-- 收藏按钮 -->
    <view class="action-item" @click="toggleFavorite">
      <image :src="favoriteIcon" class="action-icon" />
      <text :class="{'favorite-text': isFavorited}">{{ favoriteCount }}</text>
    </view>

    <!-- 分享按钮 -->
    <view class="action-item" @click="toggleShare">
      <image :src="shareIcon" class="action-icon" />
      <text :class="{'share-text': isShared}">分享</text>
    </view>
  </view>
</template>

<script>
import { mapState } from "vuex";

export default {
  data() {
    return {
      isLiked: false,
      isDisliked: false,
      isFavorited: false,
      isShared: false,
      likeCount: 114,
      favoriteCount: 514,
    };
  },
  computed: {
    ...mapState(["userInfo", "videoAbout"]), // 从 Vuex Store 获取 userInfo 和 videoAbout
    // 点赞图标状态
    likeIcon() {
      return this.isLiked
        ? "/static/alibaba_icon/点赞 (1).svg"
        : "/static/alibaba_icon/点赞.svg";
    },
    // 踩图标状态
    dislikeIcon() {
      return this.isDisliked
        ? "/static/alibaba_icon/点赞 (2).svg"
        : "/static/alibaba_icon/点赞.svg";
    },
    // 收藏图标状态
    favoriteIcon() {
      return this.isFavorited
        ? "/static/alibaba_icon/收藏 (1).svg"
        : "/static/alibaba_icon/收藏.svg";
    },
    // 分享图标状态
    shareIcon() {
      return this.isShared
        ? "/static/alibaba_icon/分享 (1).svg"
        : "/static/alibaba_icon/分享.svg";
    }
  },
  methods: {
    // 检查用户是否已登录
    checkLogin() {
      return this.userInfo && this.userInfo.userId;
    },
    // 切换点赞状态
    toggleLike() {
      if (!this.checkLogin()) {
        this.showLoginModal();
        return;
      }
      if (this.isLiked) {
        this.isLiked = false;
        this.likeCount--;
      } else {
        this.isLiked = true;
        this.likeCount++;
        if (this.isDisliked) {
          this.isDisliked = false;
        }
      }
    },
    // 切换踩状态
    toggleDislike() {
      if (!this.checkLogin()) {
        this.showLoginModal();
        return;
      }
      if (this.isDisliked) {
        this.isDisliked = false;
      } else {
        this.isDisliked = true;
        if (this.isLiked) {
          this.isLiked = false;
          this.likeCount--;
        }
      }
    },
    // 切换收藏状态
    toggleFavorite() {
      if (!this.checkLogin()) {
        this.showLoginModal();
        return;
      }

      const videoId = JSON.parse(JSON.stringify(this.videoAbout.videoId)); // 深复制 videoAbout.videoId
      const videoName = JSON.parse(JSON.stringify(this.videoAbout.videoName)); // 深复制 videoAbout.videoName
	  console.log(this.videoAbout);
      const userId = this.userInfo.userId;

      if (this.isFavorited) {
        // 取消收藏
        uni.request({
          url: 'http://localhost:8006/user/delFavoriteVideo',
          method: 'POST',
          data: {
            userId,
            videoId,
            videoName
          },
          success: (res) => {
            if (res.data.code === 200) {
              this.isFavorited = false;
              // console.log('取消收藏成功',res.data.data);
            } else {
              console.error('取消收藏失败：', res.data.message);
            }
          },
          fail: (err) => {
            console.error('请求失败：', err);
          }
        });
      } else {
        // 添加收藏
        uni.request({
          url: 'http://localhost:8006/user/addFavoriteVideo',
          method: 'POST',
          data: {
            userId,
            videoId,
            videoName
          },
          success: (res) => {
            if (res.data.code === 200) {
              this.isFavorited = true;
              // console.log('添加收藏成功',res.data.data);
            } else {
              console.error('添加收藏失败：', res.data.message);
            }
          },
          fail: (err) => {
            console.error('请求失败：', err);
          }
        });
      }
    },
    // 切换分享状态
    toggleShare() {
      if (!this.checkLogin()) {
        this.showLoginModal();
        return;
      }
      this.isShared = !this.isShared;
    },
    // 显示登录提示弹窗
    showLoginModal() {
      uni.showModal({
        title: '您还未登录',
        content: '是否前往登录？',
        confirmText: '前往登录',
        cancelText: '暂不登录',
        success: (res) => {
          if (res.confirm) {
            // 用户点击了前往登录按钮，跳转到登录页面
            uni.navigateTo({
              url: '/pages/login/login'
            });
          } else if (res.cancel) {
            console.log('用户选择暂不登录');
          }
        }
      });
    },
    // 检查当前视频是否被收藏
    checkIfFavorited() {
      if (this.userInfo && this.userInfo.favorite) {
        const videoId = JSON.parse(JSON.stringify(this.videoAbout.videoId)); // 深复制 videoAbout.videoId
        this.isFavorited = this.userInfo.favorite.some(item => item.videoId === videoId);
      }
    }
  },
  watch: {
    userInfo: {
      handler(newUserInfo) {
        // 如果用户信息中的 userId 不存在或为空，重置所有按钮状态为 false
        if (!newUserInfo || !newUserInfo.userId) {
          this.isLiked = false;
          this.isDisliked = false;
          this.isFavorited = false;
          this.isShared = false;
        } else {
          // 检查当前视频是否已经被收藏
          this.checkIfFavorited();
        }
      },
      immediate: true
    },
    videoAbout: {
      handler() {
        // 当 videoAbout 发生变化时，重新检查收藏状态
        this.checkIfFavorited();
      },
      immediate: true
    }
  },
  mounted() {
    // 检查初始的收藏状态
    this.checkIfFavorited();
  }
};
</script>

<style scoped>
.action-bar {
  display: flex;
  justify-content: space-around;
  padding: 10px;
  background-color: #ffffff;
  border-top: 1px solid #eaeaea;
}

.action-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
}

.action-icon {
  width: 24px;
  height: 24px;
  margin-bottom: 4px;
}

/* 旋转180度，无论是否激活 */
.rotated {
  transform: rotate(180deg);
}

/* 各状态文本颜色 */
.like-text {
  color: #007bff; /* 蓝色，用于点赞 */
}

.dislike-text {
  color: #707070; /* 灰色，用于踩激活状态 */
}

.favorite-text {
  color: #ffd700; /* 黄色，用于收藏 */
}

.share-text {
  color: #28a745; /* 绿色，用于分享 */
}

.text {
  font-size: 12px;
  color: #999;
}
</style>
